'use client';

import { ServerSideContext } from '@/components/Layout';
import { useClientParams, useGlobalState } from '@/hooks';
import { Box } from '@mui/material';
import { useEffect, useState } from 'react';
import './TitleMod.scss';

const TitleMod = ({
  pageTitle,
  basePath,
}: {
  pageTitle: string;
  basePath: string;
}) => {
  const {
    basePath: clientBasePath,
    categoryObject,
    queryObject,
  } = useClientParams();
  const [titleString, setTitleString] = useState(pageTitle);
  const [normal, setNormal] = useState(basePath == 'catalogsearch');

  useEffect(() => {
    if (clientBasePath == 'categories') {
      if (categoryObject) setTitleString(categoryObject.title);
      else setTitleString('Products');
    }
    if (clientBasePath == 'catalogsearch') {
      setNormal(true);
      const keyword = queryObject.q || '';
      setTitleString(`Search results for “${keyword}”`);
    }
  }, [clientBasePath, categoryObject, queryObject]);

  return (
    <h1 className={'category-title' + (normal ? ' normal-text' : '')}>
      {titleString || pageTitle}
    </h1>
  );
};

export default TitleMod;
